<template>
  <div class="pad-out-box">
    <div class="font-weight-600 font-size-16 padding-bottom-10">全部付款金额</div>
    <el-table :border="true" :data="allTableData">
      <el-table-column align="center" label="付款金额" prop="kjine">
        <template slot-scope="scope">
          <span>{{ scope.row.totalAmount | formatMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="已付金额" prop="kjine">
        <template slot-scope="scope">
          <span>{{ scope.row.paidAmount | formatMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="剩余未付金额" prop="kjine">
        <template slot-scope="scope">
          <span>{{ scope.row.unpaidAmount | formatMoney }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="font-weight-600 font-size-16 padding-bottom-10 padding-top-20">付款记录</div>
    <el-collapse accordion v-model="activeNames">
      <el-collapse-item v-for="(item, index) in recordObj.paymentRecordList" :key="index" :name="index">
        <template slot="title">
          <div class="flex title-box padding-left-right-20">
            <span class="font-size-16 padding-right-90 label-width">付款时间：{{ item.createTime | formatDateTime('YYYY-MM-DD') }}</span>
            <span class="font-size-16 padding-right-90 label-width">付款金额：{{ item.paymentAmount | formatMoney }}</span>
            <span class="font-size-16 label-width">审批状态：{{ procStatusObj[item.procStatus] }}</span>
          </div>
        </template>
        <el-descriptions :column="3" class="border-bottom-F2F2F2 margin-bottom-10">
          <el-descriptions-item label="申请部门">{{ item.orgName }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ item.applyUserName }}</el-descriptions-item>
          <el-descriptions-item label="关联验收单"><el-link type="primary" :underline="false" @click="acceptOrder(item)">{{item.acceptanceName}}</el-link></el-descriptions-item>
          <el-descriptions-item label="说明">{{ item.fundsDesc }}</el-descriptions-item>
          <el-descriptions-item label="附件">
            <el-link type="primary" :underline="false" v-for="file in item.attachmentList" :key="file.primaryKey" @click="uploadLoad(file.fileUrl)">{{ file.fileDesc }}</el-link>
            </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>

    <el-dialog title="验收单" :visible.sync="dialogShow" width="65%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-descriptions :column="2" class="border-bottom-F2F2F2 margin-bottom-10">
        <el-descriptions-item label="项目名称">{{ model.projectName }}</el-descriptions-item>
        <el-descriptions-item label="事项类型">{{ model.matterTypeName }}</el-descriptions-item>
        <el-descriptions-item label="事项名称">{{ model.matterNameValue }}</el-descriptions-item>
        <el-descriptions-item label="验收结果">{{ model.acceptanceResultName }}</el-descriptions-item>
        <el-descriptions-item label="处理方">{{ model.handleParty }}</el-descriptions-item>
        <el-descriptions-item label="处理人">{{ model.handlePerson }}</el-descriptions-item>
        <el-descriptions-item label="公司名称">{{ model.companyName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ model.phone }}</el-descriptions-item>
        <el-descriptions-item label="处理时间">{{ model.handleTime | formatDateTime('YYYY-MM-DD') }}</el-descriptions-item>
        <el-descriptions-item label="验收人">{{ model.acceptancePerson }}</el-descriptions-item>
        <el-descriptions-item label="验收时间">{{ model.acceptanceTime | formatDateTime('YYYY-MM-DD') }}</el-descriptions-item>
        <el-descriptions-item label="验收说明">{{ model.acceptanceExplain }}</el-descriptions-item>
      </el-descriptions>
      <div class="padding-bottom-20 full-box">
        <div v-for="(item, index) in model.attachmentList" :key="index" class="f-left margin-right-15">
          <el-image style="width: 100px; height: 100px;" :src="item.fileUrl" fit="fit"></el-image>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {apiPayPayRecord, apiCheckBillInfo} from '../../../api/contract';

export default {
  data() {
    return {
      dialogShow: false,
      activeNames: [0, 1],
      recordObj:{},
      model: {},
      allTableData: [{totalAmount:0,paidAmount:0,unpaidAmount:0}],
      procStatusObj:{
        1:'审批中',
        2:'审批通过',
        3:'审批驳回',
      }
    };
  },

  methods: {
    //数据源
    async getInfo() {
      let res = await apiPayPayRecord({ contractKey: this.$route.query.contractKey });
      this.recordObj = res
      this.allTableData[0].totalAmount = res.totalAmount
      this.allTableData[0].paidAmount = res.paidAmount
      this.allTableData[0].unpaidAmount = res.unpaidAmount
    },
    async acceptOrder(item) {
      let res = await apiCheckBillInfo({primaryKey:item.acceptanceKey})
      res.acceptanceResultName = res.acceptanceResult == 1 ? "合格" : "不合格"
      this.model = res
      this.dialogShow = true;
    },
    //下载
    uploadLoad(url) {
      let a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
  },

  mounted () {
    this.getInfo()
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-collapse-item__header {
  border: 1px solid #ebeef5;
}
::v-deep .el-collapse-item__content {
  padding: 20px;
}
::v-deep .el-descriptions__body span {
  font-size: 15px;
}
.label-width{
  width: 300px;
}
</style>
